<template>
    <div class="user">
        <div class="search_box">
            <el-form :model="form" label-width="80px">
                <el-form-item label="用户名">
                    <el-input v-model="form.username" clearable />
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="form.phone" clearable />
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="form.email" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button size="default" type="primary" @click="search">搜索</el-button>
                    <el-button size="default" type="primary" @click="addNew">新增</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table">
            <el-table ref="ElTableRefs" :data="tableData" style="width: 100%;height: calc(100% - 60px)" max-height="700"
                border>
                <el-table-column type="index" width="60" label="索引" />
                <el-table-column prop="username" label="用户名" align="center" />
                <el-table-column prop="phone" label="电话" align="center" />
                <el-table-column prop="email" label="邮箱" align="center" />
                <el-table-column prop="role" label="角色" align="center">
                    <template #default="{ row }">
                        <span>{{ roleMap.get(row.role) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="createAt" label="创建时间" align="center" :formatter="timeFormat" />
                <el-table-column prop="updateAt" label="更新时间" align="center" :formatter="timeFormat" />
                <el-table-column label="操作" fixed="right" width="220" align="center">
                    <template #default="{ row }">
                        <el-button size="default" link @click="edit(row)">修改</el-button>
                        <el-button type="danger" size="default" link @click="del(row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div>
                fenye
            </div>
        </div>
    </div>
    <AddNew ref="addNewRefs" :rowData="rowData" @addSuccess="getUserFn" />
</template>


<script setup lang='ts'>
import { onBeforeMount, ref, reactive, onMounted } from 'vue'
import { timeFormatter } from '@/utils/formatter'
import { getUserApi, delUserApi, } from '@/service/api'
import { ElMessage, } from 'element-plus';
import AddNew from './c-comps/AddNew.vue'

const roleMap = new Map([[0, '超级管理员'], [1, '管理员'], [2, '普通用户'],])

const form = reactive({
    username: '',
    phone: '',
    email: '',
})
let tableData = ref([])
let rowData = ref({})
let addNewRefs = ref()

const addNew = async () => {
    addNewRefs.value.addStore()
}
const edit = (row) => {
    addNewRefs.value.isModify = true
    addNewRefs.value.addStore()
    rowData.value = row
    addNewRefs.value.form.phone = row.phone
    addNewRefs.value.form.email = row.email
    addNewRefs.value.form.username = row.username
    addNewRefs.value.form.image = row.image
    addNewRefs.value.form.role = row.role
}
const del = async (row) => {
    const res: Res = await delUserApi({ id: row._id })
    if (res.code !== 200) return ElMessage.error(res.msg);
    ElMessage.success(res.msg);
    getUserFn()
}
const search = async () => {
    for (const key in form) {
        if (!form[key]) Reflect.deleteProperty(form, key)
    }
    const res: Res = await getUserApi(form)
    if (res.code !== 200) return ElMessage.error(res.msg);
    tableData.value = res.data
}

const getUserFn = async () => {
    const res: Res = await getUserApi({})
    if (res.code !== 200) return ElMessage.error(res.msg);
    tableData.value = res.data
}

const timeFormat = (row, column, cellValue) => {
    if (!cellValue) return cellValue
    return timeFormatter(cellValue)
}
onMounted(() => {
    getUserFn()
})
</script>


<style scoped lang='less'>
.user {
    background-color: white;
    padding: 15px;
    border-radius: 5px;
    height: calc(100% - 30px);

    .search_box {
        margin-bottom: 15px;

        .el-form {
            display: flex;
            align-items: center;
            justify-content: left;
        }
    }
}
</style>